<template>
	<view class="audio">
		<view class="top" @click='start'>
			<image src="https://image.alhelp.net/uploads/20231104/2164d4d69420bc95bf49e529e9d7366d.png" mode="" v-show='!status'></image>
			<image src="https://image.alhelp.net/uploads/20231104/680fb28d3427644a10500d3771ce43de.png" mode="" v-show='status'></image>
		</view>
		<view class="time">
			<view class="startTime">
				{{getTime(Math.round(currentTime))}}
			</view>
			<view class="endTime">
				{{getTime(Math.round(totalTime))}}
			</view>
		</view>
		<view v-if="show">
			<slider style="touch-action: none;margin: 0;" @change='changeAudio' activeColor='#F7DD5E' :disabled="audioDisabled"
				:min='0' :max='duration.toFixed(0)' block-size='12' :value='currentTime.toFixed(0)' :step='0.1'>
			</slider>
		</view>
		<view class="image">
			<view class="">
				<image src="../../../../../static/image/icons/syq.png" mode=""></image>
			</view>
			<view class="">
				<image src="https://image.alhelp.net/uploads/20231104/eab8ebc5867a0a9ea90195381cadc705.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				context: null,
				currentTime: 0,
				duration: 100,
				totalTime: '',
				status: false,
				audioDisabled: true,
				title: '',
				show: true,
				runTime: 0,
			};
		},
		props:{
		url:{
			type:String,
			default:''
		}	
		},
		created() {
			this.context = uni.createInnerAudioContext();
			this.context.src = this.url;
			this.context.startTime = 0;
			this.currentTime = 0;
			this.onTimeUpdate();
			this.onCanplay();
			this.onPause();
			this.onEnded();
			uni.$on('stop', () => {
				this.context.stop();
				this.status = false;
			})
		},
		onHide() {
			uni.$emit("stop");
		},
		onUnload() {
			uni.$emit("stop");
		},
		methods: {
			start() { //点击播放
				if (this.status) {
					this.context.pause();
					this.status = !this.status;
				} else {
					// uni.$emit('stop')
					this.context.play()
					this.status = !this.status;
				}
			},
			onCanplay() { //进入可播放状态
				this.context.onCanplay(() => {
					console.log("播放的时长", this.context.duration);
					this.totalTime = this.context.duration;
					setTimeout(() => {
						this.duration = this.context.duration;
					}, 1000)
				})
			},
			onPause() { //监听暂停状态
				this.context.onPause(() => {
					console.log("点击暂停了");
					//调接口保存学习进度



				})
			},
			onTimeUpdate() { //音频播放进度
				this.context.onTimeUpdate(() => {
					console.log("播放进度", this.currentTime);
					if (!Number.isFinite(this.context.duration)) {
						this.context.currentTime = Number.MAX_SAFE_INTEGER;
						this.context.currentTime = 0;
					} else {
						this.duration = this.context.duration;
						this.currentTime = this.context.currentTime;
						this.runTime = this.context.currentTime;
					}
				})
			},
			onEnded() { //播放结束
				this.context.onEnded(() => {
					//调接口保存学习进度
					this.status = false;
					this.currentTime = 0;
				})
			},
			changeAudio(e) {
				let paused = this.context.paused;
				this.context.pause();
				this.context.seek(e.detail.value)
				if (!paused) {
					this.context.play();
				}
			},
			getTime(time) {
				let m = parseInt(time / 60);
				let s = time % 60;
				return this.towNum(m) + ':' + this.towNum(s);
			},
			towNum(num) {
				if (num >= 10) {
					return num;
				} else {
					return '0' + num;
				}
			}
		}
	}
</script>

<style lang="scss">
	.audio {
		margin: 0 30rpx;
		.top{
			text-align: center;
			image{
				width: 100rpx;
				height: 100rpx;
			}
		}
		.time{
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #fff;
		}
		.image{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 -10rpx;
			image{
				width: 70rpx;
				height: 70rpx;
			}
		}
	}
</style>